<template>
  <div>
      <!-- <h3 class="title">首页</h3>
      <hr> -->
      <router-link :to="{name:'搜索'}">搜索</router-link>
      <router-link :to="{name:'登录'}">登录</router-link>
      <router-link :to="{name:'注册'}">注册</router-link>
      <hr>

      <!-- <router-link to="/search">前往搜索(routerLink)</router-link> -->
      <button @click="pushSearch()">搜索(push)</button>
      <button @click="replaceSearch()">搜索(replace)</button>
      <to-search></to-search>
      <hr>

      <van-tabs >
        <van-tab :to="'/list?id='+item.id" v-for="(item,index) in cates" :key="index" :title="item.catename">
        </van-tab>
      </van-tabs>
      <hr>

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="$pre + item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <hr>

    <div>{{ 20 | filterPrice }}</div>
    <div>{{ "15710102020" | filterTel }}</div>
    <div>{{1634890802866|filterTime}}</div>
    <hr />
    <h3 class="title">分类</h3>
    <hr>

    <!-- 遍历数据 -->
      <!-- <div class="item" v-for="(item,index) in cates" :key="index">
          <router-link :to="'/list?id='+item.id">{{item.catename}}</router-link>
      </div>
      <hr> -->

      <h3 class="title">猜你喜欢-商品</h3>
    <div class="item" v-for="(item) in goods" :key="item.id">
      <router-link :to="'/detail/id='+item.id">{{item.name}}</router-link>
    </div>
  </div>
</template>

<script>
import {reqBanner, reqHomeCates} from "../../http/http"
export default {
    data(){
        return{
            cates:[],
            goods:[
            {id:111,name:"SK2神仙水"},
            {id:222,name:"SK2前男友面膜"},
            {id:333,name:"雅顿金胶"},
            {id:444,name:"欧莱雅小熨斗"}
        ],
        banner:[]
        }
    },
        mounted(){
            //请求分类数据
            reqHomeCates().then(res=>{
                // console.log(res);
                this.cates=res.data.list;//赋值
            });
            //请求轮播
            reqBanner().then((res)=>{
              this.banner = res.data.list;
            });
        },
        methods:{
        pushSearch(){
            this.$router.push("/search")
        },
        replaceSearch(){
            this.$router.replace("/search")
        }
    },
}
</script>

<style scoped>
.item{
  padding: 0.2rem;
  margin: 0.2rem;
  border: 0.01rem solid #ccc;
}
a{
  margin: 0.2rem;
  display: inline-block;
}
.van-swipe {
  height: 3rem;
}
.van-swipe img{
  width:100%;
  height: 100%;
}
</style>